<template>
  <div class="user-pwd-page">
    <div class="page-container">
      <!-- 页面标题 -->
<!--      <div class="page-header">-->
<!--        <h1 class="page-title">修改密码</h1>-->
<!--        <p class="page-subtitle">为了您的账户安全，请定期更换密码</p>-->
<!--      </div>-->

      <!-- 修改密码卡片 -->
      <div class="pwd-card">
        <div class="card-header">
          <div class="header-content">
            <div class="security-icon">🔐</div>
            <div class="header-info">
              <h3>密码安全</h3>
              <p>请输入当前密码和新密码</p>
            </div>
          </div>
        </div>

        <!-- 表单内容 -->
        <div class="card-content">
          <a-form
            :model="formData"
            :rules="formRules"
            layout="vertical"
            class="pwd-form"
            ref="formRef"
          >
            <!-- 旧密码 -->
            <a-form-item label="当前密码" name="oldPassword">
              <a-input-password
                v-model:value="formData.oldPassword"
                placeholder="请输入当前密码"
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <LockOutlined class="input-icon" />
                </template>
              </a-input-password>
            </a-form-item>

            <!-- 新密码 -->
            <a-form-item label="新密码" name="newPassword">
              <a-input-password
                v-model:value="formData.newPassword"
                placeholder="请输入新密码（至少8位）"
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <KeyOutlined class="input-icon" />
                </template>
              </a-input-password>
            </a-form-item>

            <!-- 确认新密码 -->
            <a-form-item label="确认新密码" name="confirmPassword">
              <a-input-password
                v-model:value="formData.confirmPassword"
                placeholder="请再次输入新密码"
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <SafetyOutlined class="input-icon" />
                </template>
              </a-input-password>
            </a-form-item>

            <!-- 密码强度提示 -->
<!--            <div class="password-tips">-->
<!--              <h4>密码安全建议：</h4>-->
<!--              <ul>-->
<!--                <li>密码长度至少8位</li>-->
<!--                <li>不要使用过于简单的密码</li>-->
<!--                <li>定期更换密码以保证账户安全</li>-->
<!--              </ul>-->
<!--            </div>-->

            <!-- 操作按钮 -->
            <div class="form-actions">
              <a-button
                type="primary"
                size="large"
                :loading="submitLoading"
                @click="handleSubmit"
                class="submit-btn"
              >
                <template #icon><SaveOutlined /></template>
                修改密码
              </a-button>
              <a-button
                size="large"
                @click="handleReset"
                class="reset-btn"
              >
                <template #icon><ReloadOutlined /></template>
                重置
              </a-button>
            </div>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import {
  LockOutlined,
  KeyOutlined,
  SafetyOutlined,
  SaveOutlined,
  ReloadOutlined
} from '@ant-design/icons-vue'
import { useLoginUserStore } from '@/stores/user'
import axios from '@/router/request'
import { userLogout, userPwdUpdate } from '@/api/userController.ts'

// 用户状态管理
const userStore = useLoginUserStore()

// 表单引用
const formRef = ref()

// 提交加载状态
const submitLoading = ref(false)

// 表单数据
const formData = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 表单验证规则
const formRules = {
  oldPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' },
    { min: 8, message: '密码不得少于8位', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 8, message: '新密码不得少于8位', trigger: 'blur' },
    {
      validator: (_rule: any, value: string) => {
        if (value && value === formData.oldPassword) {
          return Promise.reject('新密码不能与当前密码相同')
        }
        return Promise.resolve()
      },
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (_rule: any, value: string) => {
        if (value && value !== formData.newPassword) {
          return Promise.reject('两次输入的密码不一致')
        }
        return Promise.resolve()
      },
      trigger: 'blur'
    }
  ]
}

// 提交修改
const handleSubmit = async () => {
  try {
    // 表单验证
    await formRef.value.validate()

    submitLoading.value = true

    // 构建提交数据
    const updateData = {
      oldPassword: formData.oldPassword,
      newPassword: formData.newPassword,
      checkPassword: formData.confirmPassword
    }

    // 调用修改密码接口（占位代码）
    const response = await userPwdUpdate(updateData)

    if (response.data.code === 0 && response.data.data) {
      message.success('密码修改成功！请重新登录')

      // 可选：自动退出登录，跳转到登录页
      setTimeout(async () => {
        await userLogout()
        userStore.setLoginUser({ userName: '未登录' })
        window.location.href = '/'
      }, 1500)

    } else {
      message.error(response.data.message || '密码修改失败，请重试')
    }

  } catch (error) {
    console.error('修改密码失败:', error)
    message.error('修改密码失败，请检查网络连接')
  } finally {
    submitLoading.value = false
  }
}

// 重置表单
const handleReset = () => {
  Object.assign(formData, {
    oldPassword: '',
    newPassword: '',
    checkPassword: ''
  })
  formRef.value?.clearValidate()
  message.info('表单已重置')
}
</script>

<style scoped>
.user-pwd-page {
  min-height: 695px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2f5 100%);
  padding: 3% 0;
}

.page-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px;
}

.pwd-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 24px;
  color: white;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.security-icon {
  font-size: 48px;
  opacity: 0.9;
}

.header-info h3 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-info p {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
}

.card-content {
  padding: 32px;
}

.pwd-form {
  max-width: 100%;
}

.form-input {
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}

.form-input:hover,
.form-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input-icon {
  color: #667eea;
}

.password-tips {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
  border: 1px solid rgba(102, 126, 234, 0.1);
  border-radius: 8px;
  padding: 20px;
  margin: 24px 0;
}

.password-tips h4 {
  color: #667eea;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
}

.password-tips ul {
  margin: 0;
  padding-left: 20px;
  color: #666;
}

.password-tips li {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.5;
}

.form-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.submit-btn {
  height: 48px;
  padding: 0 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.submit-btn:hover::before {
  left: 100%;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #7c8cff 0%, #8a5fb8 100%);
}

.reset-btn {
  height: 48px;
  padding: 0 32px;
  border-radius: 24px;
  border: 2px solid #667eea;
  color: #667eea;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  background: transparent;
}

.reset-btn:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

/* 覆盖 Ant Design 样式 */
:deep(.ant-form-item-label > label) {
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

:deep(.ant-form-item) {
  margin-bottom: 24px;
}

:deep(.ant-form-item-explain-error) {
  font-size: 12px;
}

:deep(.ant-input-affix-wrapper) {
  border-radius: 8px;
}

:deep(.ant-input) {
  border-radius: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-container {
    padding: 0 16px;
  }

  .header-content {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .card-header,
  .card-content {
    padding: 24px 20px;
  }

  .form-actions {
    flex-direction: column;
    align-items: center;
  }

  .submit-btn,
  .reset-btn {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .security-icon {
    font-size: 36px;
  }

  .header-info h3 {
    font-size: 20px;
  }

  .header-info p {
    font-size: 14px;
  }
}
</style>
